<template>
	<view class="messages-container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<text class="nav-title">消息</text>
			<view class="filter-btn" @click="clearAllUnread">
				<text class="filter-text">清除未读</text>
				<image src="https://zxs-lyblog.oss-cn-hangzhou.aliyuncs.com/icon/clean.png" mode="aspectFit" />
			</view>
		</view>


		<!-- 消息分类标签 -->
		<view class="category-tabs">
			<view class="tab-item" :class="{ active: currentTab === 'comment' }" @click="switchTab('comment')">
				<text>评论和@</text>
				<view v-if="unreadCount.comment > 0" class="unread-badge">{{ unreadCount.comment }}</view>
			</view>
			<view class="tab-item" :class="{ active: currentTab === 'like' }" @click="switchTab('like')">
				<text>赞和收藏</text>
				<view v-if="unreadCount.like > 0" class="unread-badge">{{ unreadCount.like }}</view>
			</view>
			<view class="tab-item" :class="{ active: currentTab === 'system' }" @click="switchTab('system')">
				<text>新增粉丝</text>
				<view v-if="unreadCount.follow > 0" class="unread-badge">{{ unreadCount.follow }}</view>
			</view>
			<view class="tab-item" :class="{ active: currentTab === 'purchase' }" @click="switchTab('purchase')">
				<text>已购上新</text>
				<view v-if="unreadCount.purchase > 0" class="unread-badge">{{ unreadCount.purchase }}</view>
			</view>
		</view>

		<!-- 消息列表 -->
		<view class="messages-list">
			<view v-for="message in messages" :key="message.id" class="message-item"
				@click="navigateToDetail(message.id)">
				<!-- 消息头像 -->
				<view class="message-avatar">
					<image :src="message.avatarUrl" mode="aspectFit" />
					<view v-if="message.unread" class="unread-dot"></view>
				</view>

				<!-- 消息内容 -->
				<view class="message-content">
					<view class="message-header">
						<text class="sender-name">{{ message.senderName }}</text>
						<text v-if="message.isOfficial" class="official-tag">官方</text>
						<text class="message-time">{{ message.sendTime }}</text>
					</view>
					<text class="message-text">{{ message.content }}</text>
				</view>
			</view>

			<!-- 空状态 -->
			<view v-if="messages.length === 0" class="empty-state">
				<text class="empty-text">暂无消息</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMockMessages
	} from '../../mock/messages.js';

	export default {
		data() {
			return {
				currentTab: 'all',
				showFilter: false,
				messages: [],
				unreadCount: {
					comment: 0,
					like: 0,
					follow: 0,
					purchase: 0
				}
			};
		},
		onLoad() {
			this.loadMessages();
		},
		methods: {
			// 加载消息列表
			async loadMessages() {
				try {
					// 这里应该是实际的API调用，现在使用模拟数据

					// 模拟API请求延迟
					await new Promise(resolve => setTimeout(resolve, 300));

					// 设置模拟消息数据
					this.messages = getMockMessages();

					// 计算未读消息数量
					this.calculateUnreadCount();
				} catch (error) {
					console.error('获取消息列表失败:', error);
					uni.showToast({
						title: '获取消息列表失败',
						icon: 'none'
					});
				}
			},

			// 计算未读消息数量
			calculateUnreadCount() {
				const counts = {
					comment: 0,
					like: 0,
					follow: 0,
					purchase: 0
				};

				this.messages.forEach(message => {
					if (message.unread) {
						counts.all++;
						if (counts.hasOwnProperty(message.type)) {
							counts[message.type]++;
						}
					}
				});

				this.unreadCount = counts;
			},

			// 切换标签
			switchTab(tab) {
				// 跳转到标签详情页面
				uni.navigateTo({
					url: `/pages/message/message?messageId=${messageId}`
				});
			},

			// 清除全部未读消息
			clearAllUnread() {
				// 模拟清除未读操作
				this.messages = this.messages.map(message => ({
					...message,
					unread: false
				}));

				// 重新计算未读数量
				this.calculateUnreadCount();

				// 关闭过滤选项
				this.showFilter = false;

				// 显示成功提示
				uni.showToast({
					title: '已清除全部未读',
					icon: 'success'
				});
			},

			// 跳转到消息详情
			navigateToDetail(messageId) {
				// 将点击的消息标记为已读
				this.messages = this.messages.map(message => {
					if (message.id === messageId && message.unread) {
						const updatedMessage = {
							...message,
							unread: false
						};
						// 重新计算未读数量
						this.calculateUnreadCount();
						return updatedMessage;
					}
					return message;
				});

				// 跳转到消息详情页面
				uni.navigateTo({
					url: `/pages/message/message?messageId=${messageId}`
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import './messages.scss';
</style>